<template>
  <div class="page" :style="pahesStyle">
    <div>
      <div class="EditProfile-my">
        <!-- <ul class="EditProfile-my-Edit">
          <li>
            <div>用户头像</div>
            <div @click="tabHeaderSrc">
              <img :src="headerSrc" alt />
              <img src="http://www.zhaoshengku.net/wx-xz.png" alt class="EditProfile-my-Edit-img" />
            </div>
          </li>
          <li @click="showToast(2)">
            <div>网站名称</div>
            <div>
              <span class=".EditProfile-my-Edit-span">{{yonghuQianmS}}</span>
              <img src="http://www.zhaoshengku.net/wx-xz.png" alt class="EditProfile-my-Edit-img" />
            </div>
          </li>
          <li @click="showToast(1)">
            <div>网站地址</div>
            <div>
              <span class=".EditProfile-my-Edit-span">{{yonghuNameS}}</span>
              <img src="http://www.zhaoshengku.net/wx-xz.png" alt class="EditProfile-my-Edit-img" />
            </div>
          </li>
          <li>
            <div>用户地址</div>
            <div>
              <div>
                <div>
                  <picker :range="shengarr" mode="selector">
                    <div class="picker">选择省sdsdsds</div>
                  </picker>
                </div>
                <img src="http://www.zhaoshengku.net/wx-%E5%90%91%E5%B7%A6.png" alt />
              </div>
              <div>
                <div>
                  <picker :range="shiarr" mode="selector">
                    <div class="picker">选择市</div>
                  </picker>
                </div>
                <img src="http://www.zhaoshengku.net/wx-%E5%90%91%E5%B7%A6.png" alt />
              </div>
              <div>
                <div>
                  <picker :range="xianarr" mode="selector">
                    <div class="picker">选择区/县</div>
                  </picker>
                </div>
                <img src="http://www.zhaoshengku.net/wx-%E5%90%91%E5%B7%A6.png" alt />
              </div>
            </div>
          </li>
          <li>
            <div>详细地址</div>
            <div>
              <input type="text" auth_name id />
            </div>
          </li>
          <li @click="showToast(3)">
            <div>个性签名</div>
            <div>
              <span class=".EditProfile-my-Edit-span">{{phone_qianmS}}</span>
              <img src="http://www.zhaoshengku.net/wx-xz.png" alt class="EditProfile-my-Edit-img" />
            </div>
          </li>
          <li>
            <div>标签</div>
            <ul>
              <li>
                <input type="text" auth_name id v-model.lazy="inputValue" />
                <span @click="addValue">添加</span>
              </li>
              <li>
                <span
                  v-for="(item,index) in inputValueArr"
                  :key="index"
                  style="background: url('http://www.zhaoshengku.net/wx-yuanjiaot.png') no-repeat; background-size: 166rpx 44rpx;background-position: center center; "
                >
                  {{item}}
                  <img
                    @click="removeValue(index)"
                    src="http://www.zhaoshengku.net/wx-jvxingnink.png"
                    alt
                  />
                </span>
              </li>
            </ul>
          </li>
        </ul>-->
        <div class="EditProfile-my-two">
          <div>身份证认证</div>
          <ul>
            <li>
              <div>
                <span>姓</span>
                <span>名</span>
              </div>
              <div>
                <input
                  type="text"
                  auth_name
                  id
                  placeholder="请填写真实姓名"
                  v-model.lazy="datas.auth_name"
                  placeholder-class="placeholder"
                />
              </div>
            </li>
            <li>
              <div>身份证号</div>
              <div>
                <input
                  type="text"
                  auth_name
                  id
                  placeholder="请填写本人身份证号码"
                  v-model.lazy="datas.auth_cardid"
                  placeholder-class="placeholder"
                />
              </div>
            </li>
          </ul>
          <div class="EditProfile-my-two-sfz">
            <p>上传本人身份证</p>
            <ul>
              <li>
                <div
                  style="background: url('http://www.zhaoshengku.net/wx-jvxingfive.png') no-repeat; background-size: 100% 100%;background-position: center center; "
                >
                  <p>
                    <img src="http://www.zhaoshengku.net/wx-jvxingsix.png" alt />
                    <img src="http://www.zhaoshengku.net/wx-jvxingsix.png" alt />
                  </p>
                  <p>
                    <img src="http://www.zhaoshengku.net/wx-jvxingsixkao.png" alt />
                    <img src="http://www.zhaoshengku.net/wx-jvxingsixkao.png" alt />
                  </p>
                  <p>
                    <img src="http://www.zhaoshengku.net/wx-jvxingsixkao.png" alt />
                    <img src="http://www.zhaoshengku.net/wx-jvxingsixkao.png" alt />
                  </p>
                  <p>
                    <img src="http://www.zhaoshengku.net/wx-jvxingsix.png" alt />
                    <img src="http://www.zhaoshengku.net/wx-jvxingsix.png" alt />
                  </p>
                </div>
                <p
                  v-show="!tijiaoisshow"
                  style="background: url('http://www.zhaoshengku.net/wx-jvxingfivekaobei.png') no-repeat; background-size: 100% 100%;background-position: center center; "
                  @click="tabHeaderSrc(0)"
                >上传正面</p>
                <img
                  :src="datas.auth_card_img_a?datas.auth_card_img_a:'http://www.zhaoshengku.net/wx-shiliangzhinengduixiang.png'"
                  alt
                />
              </li>
              <li>
                <div
                  style="background: url('http://www.zhaoshengku.net/wx-jvxingfive.png') no-repeat; background-size: 100% 100%;background-position: center center; "
                >
                  <p>
                    <img src="http://www.zhaoshengku.net/wx-jvxingsix.png" alt />
                    <img src="http://www.zhaoshengku.net/wx-jvxingsix.png" alt />
                  </p>
                  <p>
                    <img src="http://www.zhaoshengku.net/wx-jvxingsixkao.png" alt />
                    <img src="http://www.zhaoshengku.net/wx-jvxingsixkao.png" alt />
                  </p>
                  <p>
                    <img src="http://www.zhaoshengku.net/wx-jvxingsixkao.png" alt />
                    <img src="http://www.zhaoshengku.net/wx-jvxingsixkao.png" alt />
                  </p>
                  <p>
                    <img src="http://www.zhaoshengku.net/wx-jvxingsix.png" alt />
                    <img src="http://www.zhaoshengku.net/wx-jvxingsix.png" alt />
                  </p>
                </div>
                <p
                  v-show="!tijiaoisshow"
                  style="background: url('http://www.zhaoshengku.net/wx-jvxingfivekaobei.png') no-repeat; background-size: 100% 100%;background-position: center center; "
                  @click="tabHeaderSrc(1)"
                >上传反面</p>
                <img
                  :src="datas.auth_card_img_b?datas.auth_card_img_b:'http://www.zhaoshengku.net/wx-zhinengshiliangduixx.png'"
                  alt
                />
              </li>
            </ul>
          </div>
          <div class="EditProfile-my-two-sfz EditProfile-my-two-sfzs">
            <p>示例</p>
            <ul>
              <li>
                <div
                  style="background: url('http://www.zhaoshengku.net/wx-jvxingfive.png') no-repeat; background-size: 100% 100%;background-position: center center; "
                >
                  <p>
                    <img src="http://www.zhaoshengku.net/wx-jvxingsix.png" alt />
                    <img src="http://www.zhaoshengku.net/wx-jvxingsix.png" alt />
                  </p>
                  <p>
                    <img src="http://www.zhaoshengku.net/wx-jvxingsixkao.png" alt />
                    <img src="http://www.zhaoshengku.net/wx-jvxingsixkao.png" alt />
                  </p>
                  <p>
                    <img src="http://www.zhaoshengku.net/wx-jvxingsixkao.png" alt />
                    <img src="http://www.zhaoshengku.net/wx-jvxingsixkao.png" alt />
                  </p>
                  <p>
                    <img src="http://www.zhaoshengku.net/wx-jvxingsix.png" alt />
                    <img src="http://www.zhaoshengku.net/wx-jvxingsix.png" alt />
                  </p>
                </div>
                <img src="http://www.zhaoshengku.net/shiliangzhinengduixkaob.png" alt />
              </li>
              <li>
                <div
                  style="background: url('http://www.zhaoshengku.net/wx-jvxingfive.png') no-repeat; background-size: 100% 100%;background-position: center center; "
                >
                  <p>
                    <img src="http://www.zhaoshengku.net/wx-jvxingsix.png" alt />
                    <img src="http://www.zhaoshengku.net/wx-jvxingsix.png" alt />
                  </p>
                  <p>
                    <img src="http://www.zhaoshengku.net/wx-jvxingsixkao.png" alt />
                    <img src="http://www.zhaoshengku.net/wx-jvxingsixkao.png" alt />
                  </p>
                  <p>
                    <img src="http://www.zhaoshengku.net/wx-jvxingsixkao.png" alt />
                    <img src="http://www.zhaoshengku.net/wx-jvxingsixkao.png" alt />
                  </p>
                  <p>
                    <img src="http://www.zhaoshengku.net/wx-jvxingsix.png" alt />
                    <img src="http://www.zhaoshengku.net/wx-jvxingsix.png" alt />
                  </p>
                </div>
                <img src="http://www.zhaoshengku.net/wx-zhienengshiliangduixiangkaobei.png" alt />
              </li>
            </ul>
            <div>
              <p>1、请保证图片焦点清晰，不可太小或模糊不清；</p>
              <p>2、不可有反光影响文字显示；</p>
              <p>3、请让四个边角完整显示 不要用手遮挡身份证；</p>
              <p>4、请不要自行加水印；</p>
              <p>5、请不要使用扫描件或者、复印件。</p>
            </div>
          </div>
        </div>
        <div class="EditProfile-my-thr">
          <p>上传平台认证资料</p>
          <div class="EditProfile-my-two-sfz EditProfile-my-two-sfza">
            <ul>
              <li>
                <div
                  style="background: url('http://www.zhaoshengku.net/wx-jvxingfive.png') no-repeat; background-size: 100% 100%;background-position: center center; "
                >
                  <p>
                    <img src="http://www.zhaoshengku.net/wx-jvxingsix.png" alt />
                    <img src="http://www.zhaoshengku.net/wx-jvxingsix.png" alt />
                  </p>
                  <p>
                    <img src="http://www.zhaoshengku.net/wx-jvxingsixkao.png" alt />
                    <img src="http://www.zhaoshengku.net/wx-jvxingsixkao.png" alt />
                  </p>
                  <p>
                    <img src="http://www.zhaoshengku.net/wx-jvxingsixkao.png" alt />
                    <img src="http://www.zhaoshengku.net/wx-jvxingsixkao.png" alt />
                  </p>
                  <p>
                    <img src="http://www.zhaoshengku.net/wx-jvxingsix.png" alt />
                    <img src="http://www.zhaoshengku.net/wx-jvxingsix.png" alt />
                  </p>
                </div>
                <p
                  v-show="!tijiaoisshow"
                  style="background: url('http://www.zhaoshengku.net/wx-jvxingfivekaobei.png') no-repeat; background-size: 100% 100%;background-position: center center; "
                  @click="tabHeaderSrc(2)"
                >上传资料</p>
                <img :src="datas.auth_platform" alt />
              </li>
            </ul>
          </div>
          <p v-show="!tijiaoisshow">*下载下方图片长按保存到手机打印后填写正确信息并拍照上传</p>
          <ul>
            <li>
              <p>
                <img
                  src="https://www.zhaoshengku.net/www.zhaoshengku.net.jpg"
                  alt
                  @click="downloadTask"
                  v-show="!isshow"
                />
              </p>
              <p></p>
            </li>
            <li
              v-show="!tijiaoisshow"
              style="background: url('http://www.zhaoshengku.net/wx-yuaniaojvxingone.png') no-repeat; background-size: 100% 100%;background-position: center center; "
              @click="downloadTask()"
            >点击下载</li>
          </ul>
          <div>
            <!-- <p v-show="i" class="pone">示例</p>
            <p v-show="i" class="ptwo">
              <img src="http://www.zhaoshengku.net/wx-tucengtwo.png" alt />
            </p>-->
            <p
              style="background: url('http://www.zhaoshengku.net/wx-%E5%9C%86%E8%A7%92%E7%9F%A9%E5%BD%A2%20%281%29.png') no-repeat; background-size: 100% 100%;background-position: center center; "
              @click="tijiaos"
              v-if="!tijiaoisshow"
              class="pstr"
            >确认提交</p>
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="basedataFriends_meng" :style="windowHeights" v-show="basedataFriends_mengtab==1"></div>
    <div class="basedataFriends_qianm" v-show="basedataFriends_qianm==2">
      <div>网站名称</div>
      <div style="margin-top:50rpx">
        <input type="text" v-model.lazy="yonghuQianm" maxlength="20" placeholder="请输入您的网站名称" />
      </div>
      <div></div>
      <div>
        <span @click="showToastTrue(0)">取消</span>
        <span @click="showToastTrue(1)">确认</span>
      </div>
    </div>
    <div class="basedataFriends_qianm" v-show="basedataFriends_qianm==1">
      <div>网站地址</div>
      <div style="margin-top:50rpx">
        <input type="text" v-model.lazy="yonghuName" maxlength="20" placeholder="请输入您的网站地址" />
      </div>
      <div></div>
      <div>
        <span @click="showToastTrue(2)">取消</span>
        <span @click="showToastTrue(3)">确认</span>
      </div>
    </div>
    <div class="basedataFriends_qianm" v-show="basedataFriends_qianm==3">
      <div>个性签名</div>
      <div>
        <input type="text" v-model.lazy="phone_qianm" maxlength="20" placeholder="请输入您的个性签名" />
      </div>
      <div>最多可输入20个字符</div>
      <div>
        <span @click="showToastTrue(4)">取消</span>
        <span @click="showToastTrue(5)">确认</span>
      </div>
    </div>-->
  </div>
</template>

<script>
import qiniuUploader from "../../../static/qiniuUploader";
export default {
  data() {
    return {
      detailsList: [],
      inputValue: "",
      inputValueArr: [],
      headerSrc: "",
      filePath: [],
      token: " ",
      windowHeights: "",
      pahesStyle: "",
      yonghuQianm: "",
      yonghuQianmS: "请输入您的网站名称",
      yonghuName: "",
      yonghuNameS: "请输入您的网站地址",
      basedataFriends_mengtab: 0,
      basedataFriends_qianm: 0,
      phone_qianm: "",
      phone_qianmS: "请输入您的个性签名",
      datas: {
        auth_card_img_a: "",
        auth_card_img_b: "",
        auth_platform: "",
        auth_name: "",
        auth_cardid: ""
      },
      headerCode: "",
      tijiaoisshow: false,
      i: false,
      cardimg: [],
      chongfushangcimg: false
    };
  },
  methods: {
    // 填写网址名称签名
    showToast(e) {
      this.basedataFriends_qianm = e;
      this.basedataFriends_mengtab = 1;
      this.pahesStyle = this.windowHeights + "; overflow: hidden;";
    },
    showToastTrue(e) {
      this.pahesStyle = "";
      this.basedataFriends_mengtab = 0;
      this.basedataFriends_qianm = 0;
      if (e == 1) {
        this.yonghuQianmS = this.yonghuQianm;
      } else if (e == 3) {
        this.yonghuNameS = this.yonghuName;
      } else if (e == 5) {
        this.phone_qianmS = this.phone_qianm;
      }
    },
    initQiniu() {
      var options = {
        region: "NCN", // 华北区
        uptokenURL: "https://api.zhaoshengku.net/index/uploader/qtoken", //请求后端uptoken的url地址
        domain: "http://www.zhaoshengku.net", //yourBucketId:这个去你域名配置那里要
        save_key: true
      };
      qiniuUploader.init(options);
    },
    addValue() {
      if (this.inputValueArr.length > 2) {
        wx.showToast({
          title: "最多只能添加三个标签哦",
          icon: "none"
        });
        return;
      }
      if (this.inputValue.length == 0) {
        wx.showToast({
          title: "标签不能为空哦",
          icon: "none"
        });
        return;
      }
      if (this.inputValue.length > 4) {
        wx.showToast({
          title: "请用四个字描述您的标签",
          icon: "none"
        });
      } else {
        this.inputValueArr.push(this.inputValue);
        this.inputValue = "";
      }
    },
    removeValue(e) {
      this.inputValueArr.splice(e, e + 1);
    },
    tabHeaderSrc(e) {
      this.$options.methods.initQiniu();
      wx.chooseImage({
        count: 1, //一次最多可以选择的图片张数
        sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ["album", "camera"], // 可以指定来源是相册还是相机，默认二者都有
        success: res => {
          var filePath = res.tempFilePaths[0];
          var xiaoimgSrc = res.tempFilePaths[0].substring(7);
          // 交给七牛上传
          qiniuUploader.upload(
            filePath,
            res => {
              this.headerSrc = "http://www.zhaoshengku.net/" + xiaoimgSrc;
            },
            error => {},
            null, // 可以使用上述参数，或者使用 null 作为参数占位符
            progress => {},
            () => {
              wx.hideLoading();
            }
          );
        },
        fail: function() {},
        complete: function() {
          wx.hideToast();
        }
      });
    },
    // 点击图片预览
    downloadTask() {
      // wx.downloadFile({
      //   // 示例 url，并非真实存在
      //   url: "http://www.zhaoshengku.net/zsksqqrs.pdf",
      //   success: function(res) {
      //     const filePath = res.tempFilePath;
      //     wx.openDocument({
      //       filePath: filePath,
      //       success: function(res) {}
      //     });
      //   }
      // });
      var _this = this;
      var url = "https://www.zhaoshengku.net/www.zhaoshengku.net.jpg";
      var urls = [url];
      wx.previewImage({
        current: url, // 当前显示图片的http链接
        urls: urls // 需要预览的图片http链接列表
      });
    },
    // //下载文件
    // downloadTaskss() {
    //   wx.downloadFile({
    //     url:
    //       "https://www.zhaoshengku.net/%E6%8B%9B%E7%94%9F%E5%BA%93%E7%94%B3%E8%AF%B7%E7%A1%AE%E8%AE%A4%E4%B9%A6.docx",

    //     success: function(res) {
    //       var filePath = res.tempFilePath;

    //       wx.openDocument({
    //         filePath: filePath,

    //         success: function(res) {
    //           console.log("打开文档成功");
    //         }
    //       });
    //     }
    //   });
    // },
    // 上传图片
    tabHeaderSrc(e) {
      if (this.chongfushangcimg) {
        wx.showToast({
          title: "请勿重复操作！",
          icon: "none",
          duration: 1500
        });
        return;
      }
      this.chongfushangcimg = true;
      this.$options.methods.initQiniu();
      wx.showToast({
        title: "",
        icon: "loading",
        duration: 5000
      });
      wx.chooseImage({
        count: 1, //一次最多可以选择的图片张数
        sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ["album", "camera"], // 可以指定来源是相册还是相机，默认二者都有
        success: res => {
          var filePath = res.tempFilePaths[0];
          var xiaoimgSrc = res.tempFilePaths[0].substring(7);
          // 交给七牛上传
          qiniuUploader.upload(
            filePath,
            res => {
              if (e == 0) {
                this.datas.auth_card_img_a = res.data.url;
                wx.hideToast();
                this.chongfushangcimg = false;
              } else if (e == 1) {
                this.datas.auth_card_img_b = res.data.url;
                wx.hideToast();
                this.chongfushangcimg = false;
              } else if (e == 2) {
                this.datas.auth_platform = res.data.url;
                wx.hideToast();
                this.chongfushangcimg = false;
              }
            },
            error => {},
            null, // 可以使用上述参数，或者使用 null 作为参数占位符
            progress => {},
            () => {
              wx.hideLoading();
            }
          );
        },
        fail: function() {},
        complete: function() {
          wx.hideToast();
        }
      });
    },
    tijiaos() {
      if (this.datas.auth_name == "") {
        wx.showToast({
          title: "名字不能为空",
          icon: "none",
          duration: 1000,
          mask: true
        });
        return;
      } else if (this.datas.auth_cardid == "") {
        wx.showToast({
          title: "身份证号不能为空",
          icon: "none",
          duration: 1000,
          mask: true
        });
        return;
      } else if (this.datas.auth_card_img_a == "") {
        wx.showToast({
          title: "请上传身份证正面",
          icon: "none",
          duration: 1000,
          mask: true
        });
        return;
      } else if (this.datas.auth_card_img_b == "") {
        wx.showToast({
          title: "请上穿身份证反面",
          icon: "none",
          duration: 1000,
          mask: true
        });
        return;
      } else if (this.datas.auth_platform == "") {
        wx.showToast({
          title: "请上传平台认证资料",
          icon: "none",
          duration: 1000,
          mask: true
        });
        return;
      }
      var data = {
        name: this.datas.auth_name,
        cardid: this.datas.auth_cardid,
        cardimg: [this.datas.auth_card_img_a, this.datas.auth_card_img_b],
        auth_platform: this.datas.auth_platform
      };
      console.log(data);
      wx.request({
        url: "https://api.zhaoshengku.net/index/member/personalauth",
        data: data,
        method: "post",
        header: {
          Authorization: this.headerCode
        },
        success: res => {
          console.log(res);
          if (res.data.code == 200) {
            wx.showToast({
              title: "提交成功，等待系统确认！",
              icon: "true",
              duration: 1000,
              mask: true
            });
            this.datas.auth_name = "";
            this.datas.auth_cardid = "";
            this.datas.auth_card_img_a = "";
            this.datas.auth_card_img_b = "";
            this.datas.auth_platform = "";
            setTimeout(() => {
              wx.reLaunch({
                url: "/pages/my/main"
              });
            }, 1500);
          } else {
            wx.showToast({
              title: res.data.msg,
              icon: "none",
              duration: 1000,
              mask: true
            });
            return;
          }
        },
        fail: res => {
          console.log(res);
          if (res.errMsg) {
            wx.showToast({
              title: "请检查网络连接！",
              icon: "none",
              duration: 1500
            });
          }
        }
      });
    }
  },
  mounted() {
    wx.getSystemInfo({
      success: res => {
        this.windowHeights = "height:" + res.windowHeight * 2 + "rpx";
      }
    });
    //标题
    wx.setNavigationBarTitle({
      title: "认证中心"
    });

    // 获取token
    wx.getStorage({
      key: "koken",
      success: res => {
        if (res.data) {
          this.headerCode = "Bearer " + res.data;
          wx.request({
            url: "https://api.zhaoshengku.net/index/member/getAuth",
            method: "POST",
            header: {
              Authorization: this.headerCode
            },
            success: res => {
              console.log(res);
              if (res.data.code == 200 || res.data.code == 201) {
                console.log(res.data.data);
                if (!res.data.data.auth_name) {
                  console.log("我还没认证");
                  return;
                } else {
                  console.log("我已经认证过了");
                  this.datas = res.data.data;
                  if (res.data.data.auth_state == 1) {
                    wx.showToast({
                      title: "您已通过认证！",
                      icon: "true",
                      duration: 1000
                    });
                    this.tijiaoisshow = true;
                  } else if (res.data.data.auth_state == 2) {
                    this.tijiaoisshow = false;
                  } else if (res.data.data.auth_state == 0) {
                    wx.showToast({
                      title: "正在审核中！请耐心等待",
                      icon: "none",
                      duration: 1000
                    });
                    this.tijiaoisshow = false;
                  }
                }
              }
            },
            fail: res => {
              if (res.errMsg) {
                wx.showToast({
                  title: "请检查网络连接！",
                  icon: "none",
                  duration: 1500
                });
              }
            }
          });
        } else {
          wx.navigateTo({
            url: "/pages/loginRegister/main"
          });
        }
      }
    });
  },
  onPullDownRefresh() {
    wx.stopPullDownRefresh();
  }
};
</script>

<style scoped>
.page {
  position: relative;
}
/* 身份证认证开始 */
.EditProfile-my-two {
  margin-top: 10rpx;
  padding: 0 30rpx;
  background: #fff;
}
.EditProfile-my-two > div:nth-child(1) {
  font-size: 28rpx;
  font-weight: bold;
  color: rgba(51, 51, 51, 1);
  border-bottom: 1px solid #dddddd;
  height: 100rpx;
  line-height: 100rpx;
}
.EditProfile-my-two > ul > li:nth-child(1) {
  display: flex;
  height: 100rpx;
  line-height: 100rpx;
  align-items: center;
  border-bottom: 1px solid #dddddd;
}
.EditProfile-my-two > ul > li:nth-child(1) > div:nth-child(1) {
  display: flex;
  justify-content: space-between;
  width: 116rpx;
  font-size: 30rpx;
  font-weight: 400;
  color: rgba(0, 0, 0, 1);
  margin-right: 20rpx;
}
.EditProfile-my-two > ul > li:nth-child(1) > div:nth-child(2) {
  flex: 1;
}
.EditProfile-my-two > ul > li:nth-child(1) > div:nth-child(2) input {
  font-size: 26rpx;
  font-weight: 400;
  color: #333;
  width: 100%;
}
.EditProfile-my-two > ul > li:nth-child(2) {
  display: flex;
  height: 100rpx;
  line-height: 100rpx;
  align-items: center;
  border-bottom: 1px solid #dddddd;
}
.EditProfile-my-two > ul > li:nth-child(2) > div:nth-child(1) {
  font-size: 30rpx;
  font-weight: 400;
  color: rgba(0, 0, 0, 1);
  margin-right: 20rpx;
}
.EditProfile-my-two > ul > li:nth-child(2) > div:nth-child(2) {
  flex: 1;
}
.EditProfile-my-two > ul > li:nth-child(2) > div:nth-child(2) input {
  font-size: 26rpx;
  font-weight: 400;
  color: #333;
  width: 100%;
}
.EditProfile-my-two-sfz {
  padding-top: 29rpx;
  border-bottom: 1px solid #dddddd;
  padding-bottom: 60rpx;
  box-sizing: border-box;
}
.EditProfile-my-two-sfz > p {
  font-size: 30rpx;
  font-weight: 400;
  color: rgba(0, 0, 0, 1);
}
.EditProfile-my-two-sfz > ul {
  margin-top: 30rpx;
  margin-bottom: 30rpx;
}
.EditProfile-my-two-sfz > ul > li {
  width: 324rpx;
  height: 279rpx;
}
.EditProfile-my-two-sfz > ul > li > div {
  padding: 40rpx;
}
.EditProfile-my-two-sfz > ul > li > div > p {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.EditProfile-my-two-sfz > ul > li > div > p:nth-child(1) > img,
.EditProfile-my-two-sfz > ul > li > div > p:nth-child(4) > img {
  width: 20rpx;
  height: 5rpx;
}
.EditProfile-my-two-sfz > ul > li > div > p:nth-child(2) > img,
.EditProfile-my-two-sfz > ul > li > div > p:nth-child(3) > img {
  width: 5rpx;
  height: 20rpx;
}
.EditProfile-my-two-sfz > ul > li > div > p:nth-child(3) > img {
  margin-top: 122rpx;
}
.EditProfile-my-two-sfz > ul {
  display: flex;
  justify-content: space-between;
}
.EditProfile-my-two-sfz > ul > li > p {
  font-size: 28rpx;
  width: 100%;
  height: 60rpx;
  line-height: 60rpx;
  font-weight: bold;
  color: rgba(255, 255, 255, 1);
  line-height: 32px;
  text-align: center;
}
.EditProfile-my-two-sfz > ul > li {
  position: relative;
}
.EditProfile-my-two-sfz > ul > li > img {
  width: 223rpx;
  height: 152rpx;
  position: absolute;
  left: 53rpx;
  top: 50rpx;
}
.EditProfile-my-two-sfzs {
  padding-bottom: 30rpx;
  border-bottom: none;
}
.EditProfile-my-two-sfzs > ul {
  margin-bottom: 0rpx;
}
.EditProfile-my-two-sfzs > div:nth-child(3) {
  font-size: 24rpx;
  font-weight: 400;
  color: rgba(153, 153, 153, 1);
}
/* 身份证认证结束 */
/* 平台认证开始 */
.EditProfile-my-thr {
  margin-top: 10rpx;
  padding: 0 30rpx;
  background: #fff;
}
.EditProfile-my-thr > p:nth-child(1) {
  font-size: 28rpx;
  font-weight: bold;
  color: rgba(0, 0, 0, 1);
  height: 100rpx;
  line-height: 100rpx;
  border-bottom: 1px solid #dddddd;
}
.EditProfile-my-thr > p:nth-child(3) {
  margin-top: 20rpx;
  font-size: 26rpx;
  font-weight: 400;
  color: rgba(232, 22, 22, 1);
}
.EditProfile-my-thr > ul {
  width: 100%;
}
.EditProfile-my-thr > div > ul > li {
  width: 509rpx;
  height: 297rpx;
  margin: 0 auto;
}
.EditProfile-my-thr > div > ul > li > p {
  width: 509rpx;
  height: 64rpx;
  line-height: 64rpx;
}
.EditProfile-my-thr > div > ul > li > img {
  width: 271rpx;
  height: 340rpx;
  left: 119rpx;
  top: 40rpx;
}
.EditProfile-my-two-sfza {
  height: 600rpx;
}
.EditProfile-my-two-sfza > ul > li > div {
  padding: 40rpx 100rpx 70rpx 100rpx;
}
.EditProfile-my-two-sfza > ul > li > div > p:nth-child(3) > img {
  margin-top: 286rpx;
}
.EditProfile-my-thr > ul:nth-child(4) {
  box-sizing: border-box;
  margin-top: 30rpx;
  display: flex;
  align-items: center;
  padding-left: 60rpx;
  margin-right: 30rpx;
  border-bottom: 1px solid #dddddd;
  padding-bottom: 50rpx;
}
.EditProfile-my-thr > ul:nth-child(4) > li:nth-child(1) {
  margin-right: 84rpx;
}
.EditProfile-my-thr > ul:nth-child(4) > li:nth-child(1) > p > img {
  width: 186rpx;
  height: 200rpx;
  margin-bottom: 20rpx;
}
.EditProfile-my-thr > ul:nth-child(4) > li:nth-child(1) > p:nth-child(2) {
  font-size: 22rpx;
  font-weight: 400;
  color: rgba(34, 151, 212, 1);
  text-align: right;
}
.EditProfile-my-thr > ul:nth-child(4) > li:nth-child(2) {
  font-size: 30rpx;
  font-weight: bold;
  color: rgba(34, 151, 212, 1);
  width: 272rpx;
  height: 68rpx;
  text-align: center;
  line-height: 68rpx;
}
.EditProfile-my-thr > div:nth-child(5) > .pone {
  font-size: 30rpx;
  font-weight: 400;
  color: rgba(0, 0, 0, 1);
  height: 100rpx;
  line-height: 100rpx;
}
.EditProfile-my-thr > div:nth-child(5) > .ptwo {
  width: 100%;
  text-align: center;
}
.EditProfile-my-thr > div:nth-child(5) > .ptwo img {
  width: 561rpx;
  height: 845rpx;
}
.EditProfile-my-thr > div:nth-child(5) > .pstr {
  width: 685rpx;
  height: 98rpx;
  text-align: center;
  line-height: 98rpx;
  margin: 100rpx 0;
}
/* 平台认证结束 */
/* 个人信息模块开始 */
.EditProfile-my {
  background: #eeeeee;
  padding-top: 10rpx;
}
.EditProfile-my-Edit {
  padding: 0 34rpx;
  background: #fff;
}
.EditProfile-my-Edit > li {
  height: 110rpx;
  line-height: 110rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #dddddd;
}
.EditProfile-my-Edit > li > div:nth-child(1) {
  font-size: 26rpx;
  font-weight: bold;
  color: rgba(51, 51, 51, 1);
}
.EditProfile-my-Edit > li > div:nth-child(2) {
  display: flex;
  align-items: center;
}
.EditProfile-my-Edit > li:nth-child(1) > div:nth-child(2) > img:nth-child(1) {
  width: 67.1rpx;
  height: 67.1rpx;
  border-radius: 100%;
}
.EditProfile-my-Edit-img {
  width: 12rpx;
  height: 22rpx;
  margin-left: 41rpx;
}
.EditProfile-my-Edit-span {
  font-size: 24rpx;
  font-weight: 400;
  color: rgba(102, 102, 102, 1);
}
.EditProfile-my-Edit > li:nth-child(5) > div:nth-child(1) {
  font-size: 26rpx;
  font-weight: bold;
  color: rgba(153, 153, 153, 1);
  margin-right: 40rpx;
}
.EditProfile-my-Edit > li:nth-child(5) {
  justify-content: flex-start;
}
.EditProfile-my-Edit > li:nth-child(5) > div:nth-child(2) > input {
  font-size: 22rpx;
  font-weight: 400;
  color: #333;
  width: 530rpx;
}
.EditProfile-my-Edit > li:nth-child(7) {
  height: 200rpx;
  justify-content: flex-start;
  align-items: flex-start;
  border-bottom: none;
}
.EditProfile-my-Edit > li:nth-child(7) > div {
  margin-right: 90rpx;
}
.EditProfile-my-Edit > li:nth-child(7) > ul > li {
  display: flex;
  height: 100rpx;
  align-items: center;
}
.EditProfile-my-Edit > li:nth-child(7) > ul > li:nth-child(1) span {
  font-size: 30rpx;
  font-weight: 500;
  color: rgba(34, 151, 212, 1);
}
.EditProfile-my-Edit > li:nth-child(7) > ul > li:nth-child(1) input {
  font-size: 24rpx;
  font-weight: 400;
  color: #333;
  border-bottom: 1px solid #ddddddff;
  padding-left: 10rpx;
}
.EditProfile-my-Edit > li:nth-child(7) > ul > li:nth-child(2) span {
  display: inline-block;
  width: 166rpx;
  height: 44rpx;
  text-align: center;
  line-height: 44rpx;
  font-size: 24rpx;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  margin-right: 10rpx;
}
.EditProfile-my-Edit > li:nth-child(7) > ul > li:nth-child(2) span img {
  width: 15rpx;
  height: 17rpx;
  margin-left: 5rpx;
  margin-right: -3rpx;
}
.EditProfile-my-Edit > li:nth-child(4) > div:nth-child(2) {
  display: flex;
  justify-content: space-between;
  width: 500rpx;
}
.EditProfile-my-Edit > li:nth-child(4) > div:nth-child(2) > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 30%;
}
.EditProfile-my-Edit > li:nth-child(4) > div:nth-child(2) > div > div {
  width: 120rpx;
  font-size: 26rpx;
  font-weight: 400;
  color: rgba(153, 153, 153, 1);
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  overflow: hidden;
}
.EditProfile-my-Edit > li:nth-child(4) > div:nth-child(2) > div > img {
  width: 22rpx;
  height: 12rpx;
}
.picker {
  width: 120rpx;
  font-size: 26rpx;
  font-weight: 400;
  color: rgba(153, 153, 153, 1);
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  overflow: hidden;
}
.placeholder {
  color: #999;
}
input {
  color: #333;
}
/* 个人信息模块结束 */
</style>
